import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mall/constant/app_dimens.dart';
import 'package:mall/constant/app_strings.dart';
import 'package:mall/constant/text_style.dart';
import 'package:mall/modules/model/goods_entity.dart';
import 'package:mall/modules/model/project_selection_detail_entity.dart';
import 'package:mall/modules/sc/goods_sc.dart';
import 'package:mall/modules/sc/project_selection_sc.dart';
import 'package:mall/ui/widgets/cached_image.dart';
import 'package:mall/ui/page/goods/widgets/goods_widget.dart';
import 'package:mall/utils/list_placeholder_component/list_placeholder_component.dart';
import 'package:mall/router/navigator_util.dart';

import "package:flutter_html/flutter_html.dart";
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ProjectSelectionDetailView extends StatefulWidget {
  final int id;

  ProjectSelectionDetailView(this.id);

  @override
  _ProjectSelectionDetailViewState createState() => _ProjectSelectionDetailViewState();
}

class _ProjectSelectionDetailViewState extends State<ProjectSelectionDetailView> {
  // ProjectSelectionViewModel _projectSelectionViewModel =
  // ProjectSelectionViewModel();
  final sc_projectSelection = Get.put(ProjectSelectionSc());
  final sc_recomment = Get.put(RelatedGoodsSc());
  @override
  void initState() {
    super.initState();
    // _projectSelectionViewModel.queryDetail(widget.id);
    sc_projectSelection.id = widget.id;
    sc_projectSelection.refreshData();

    sc_recomment.id = widget.id;
    sc_recomment.refreshData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppStrings.PROJECT_SELECTION_DETAIL),
        centerTitle: true,
      ),
      // body: Consumer<ProjectSelectionViewModel>(
      //   builder: (context, model, child) {
      //     return _initView(model);
      //   },
      // ),
      body: Obx(() {
        return WrappedListPlaceholderComponent.widget1(
          state: sc_projectSelection.loadState.value,
          data: sc_projectSelection.data.value,
          builder: (p0) => _contentView(p0),
        );
      }),
    );
  }

  // Widget _initView(ProjectSelectionViewModel projectSelectionViewModel) {

  //   if (projectSelectionViewModel.pageState == PageState.hasData) {
  //     return _contentView(projectSelectionViewModel);
  //   }
  //   return ViewModelStateWidget.stateWidgetWithCallBack(
  //       projectSelectionViewModel, (){});
  // }

  Widget _contentView(ProjectSelectionDetailEntity model) {
    return Obx(() => Container(
            child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Html(data: model.topic?.content?.replaceAll("//", "http://")),
              Padding(
                padding: EdgeInsets.only(top: 15),
              ),
              Container(
                margin: EdgeInsets.all(15),
                child: GridView.builder(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2, mainAxisSpacing: 10, crossAxisSpacing: 10, childAspectRatio: 0.8),
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemCount: model.goods?.length,
                    itemBuilder: (BuildContext context, int index) {
                      return _getGridViewItem(model.goods![index]);
                    }),
              ),
              Container(
                height: 22,
                alignment: Alignment.center,
                child: Text(AppStrings.RECOMMEND_PROJECT_SELECTION, style: FMTextStyle.color_333333_size_11),
              ),
              Obx(() => ListView.builder(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: sc_recomment.data.length,
                  itemBuilder: (BuildContext context, int index) {
                    return _itemView(sc_recomment.data[index]);
                  }))
            ],
          ),
        )));
  }

  _goGoodsDetail(int goodsId) {
    NavigatorUtil.goGoodsDetails(context, goodsId);
  }

  Widget _getGridViewItem(GoodsEntity productEntity) {
    return GoodsWidget(productEntity, (id) => _goGoodsDetail(id));
  }

  Widget _itemView(ProjectSelectionDetailTopic related) {
    return Container(
      margin: EdgeInsets.only(left: 15, right: 15, top: 15),
      child: Card(
        clipBehavior: Clip.antiAlias,
        child: InkWell(
          onTap: () => _goDetail(related.id),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                  width: double.infinity,
                  child:
                      CachedImageView(double.infinity, ScreenUtil().setHeight(AppDimens.DIMENS_400), related.picUrl)),
              Padding(padding: EdgeInsets.only(top: 10)),
              Container(
                  margin: EdgeInsets.only(left: 15, right: 15, top: 15),
                  child: Text(related.title ?? "",
                      maxLines: 1, overflow: TextOverflow.ellipsis, style: FMTextStyle.color_222222_size_13)),
              Container(
                  margin: EdgeInsets.only(left: 15, right: 15, top: 15),
                  child: Text(related.subtitle ?? "",
                      maxLines: 1, overflow: TextOverflow.ellipsis, style: FMTextStyle.color_222222_size_13)),
              Container(
                  margin: EdgeInsets.only(bottom: 15, left: 15, right: 15, top: 15),
                  child: Text(AppStrings.DOLLAR + "${related.price}", style: FMTextStyle.color_ff5722_size_13)),
            ],
          ),
        ),
      ),
    );
  }

  _goDetail(int? id) {
    // _projectSelectionViewModel.queryDetail(widget.id);
    sc_projectSelection.refreshData();
  }
}
